.loading_first .mobius {
    --gap: 4px;
    --boxWidth: 100px;
    --boxHeight: 70px;
    --timeLine: 4s;

    position: absolute;
    width: calc(var(--boxWidth) * 2 - var(--gap));
    height: var(--boxHeight);
    left: 50%;
    top: 50%;
    translate: -50% -50%;

    .leftTop {
        left: 0px;

        .pith {
            animation: mobiusRotate var(--timeLine) linear infinite;
        }
    }

    .leftBottom {
        left: 0px;
        scale: -1 -1;

        .pith {
            animation: mobiusRotate var(--timeLine) linear 3s infinite;
        }
    }

    .rightTop {
        right: 0px;
        scale: -1 1;

        .pith {
            animation: mobiusRotate var(--timeLine) linear 2s infinite;
        }
    }

    .rightBottom {
        z-index: 2;
        right: 0px;
        scale: 1 -1;

        .pith {
            animation: mobiusRotate var(--timeLine) linear 1s infinite;
        }
    }

    .roll {
        width: var(--boxWidth);
        height: var(--boxHeight);
        position: absolute;
        overflow: hidden;
        border-radius: 50%;
        clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
        z-index: 0;

        .pith {
            box-sizing: border-box;
            content: "";
            position: absolute;
            z-index: -2;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: var(--boxWidth);
            height: var(--boxWidth);
            transform: rotate(-90deg);
            background: conic-gradient(transparent 60%, #fff 20%, rgb(255, 0, 149));
        }
    }

    .top {
        position: absolute;
        background-color: #fff;
        width: calc(var(--boxWidth) - var(--gap) * 2);
        height: calc(var(--boxHeight) - var(--gap) * 2);
        top: var(--gap);
        z-index: 10;
        border-radius: 50%;
    }
    .topL {
        left: var(--gap);
    }

    .topR {
        right: var(--gap);
    }
}
